<template>
	<view class="index">
		<tn-tabbar v-model="currentIndex" :list="tabbarList" :safeAreaInsetBottom="safeAreaInsetBottom" :outHeight="130" @change="changeTabbar"></tn-tabbar>
		
		<xingzu v-show="currentIndex === 0"></xingzu>
		<my v-if="currentIndex === 2" @back="comeBack"></my>
		
		<xingzu v-show="recordIndex === 0 && currentIndex !== 0"></xingzu>
		<my v-if="recordIndex === 2 && currentIndex !== 2" @back="comeBack"></my>
		
		<!-- 发布弹框 -->
		<tn-popup v-model="popupShow" mode="bottom" height="267px" :closeBtn="true">
			<view class="popup_title">发布</view>
			<view class="popup_content">
				<u-row justify="space-between" gutter="10">
					<u-col span="6">
						<view class="release">
							<image :src="updateImg" class="update_image" @click="goTo('/pages/users/xingzu/releaseImg')"></image>
							<view class="update_title">上传图片</view>
						</view>
					</u-col>
					<u-col span="6">
						<view class="release">
							<image :src="updateVideo" class="update_image" @click="goTo('/pages/users/xingzu/releaseVideo')"></image>
							<view class="update_title">上传视频</view>
						</view>
					</u-col>
				</u-row>
				<view class="release_close">
					<text class="tn-icon-close release_close_icon" @click="popupShow = false"></text>
				</view>
			</view>
		</tn-popup>
	</view>
</template>

<script>
import xingzu from './xingzu.vue';
import my from './my.vue'

export default {
	components:  {
		xingzu,
		my
	},
	data() {
		return {
			safeAreaInsetBottom: true,
			currentIndex: 0,
			recordIndex: 0,
			popupShow: false,
			updateImg: require('@/pages/users/static/xingzu/updateImg.png'),
			updateVideo: require('@/pages/users/static/xingzu/updateVideo.png'),
			tabbarList: [
				{
					title: '星族圈',
					activeIcon: '/pages/users/static/xingzu/xingzuRedSelection.png',
					inactiveIcon: '/static/tabbar/homepage.png',
					iconSize: 52,
					activeColor: '#1A1A1A',
				},
				{
					activeIcon: '/pages/users/static/xingzu/updateSelection.png',
					inactiveIcon: '/pages/users/static/xingzu/updateSelection.png',
					iconSize: 45,
					activeIconColor: '#fff',
					inactiveIconColor: '#fff',
					out: true,
				},
				{
					title: '我的',
					activeIcon: '/static/tabbar/mySelection.png',
					inactiveIcon: '/static/tabbar/my.png',
					iconSize: 52,
					activeColor: '#1A1A1A',
				}
			]
		}
	},
	onBackPress(options) {
		this.$emit('starBack')
	},
	methods: {
		comeBack() {
			this.currentIndex = 0
		},
		changeTabbar(e) {
			if(e !== 1) {
				this.recordIndex = e
			} else {
				this.popupShow = true
			}
		},
		goTo(url) {
			uni.navigateTo({
				url: url
			})
		}
	}
}
</script>

<style>
page {
	background-color: #F6F6F6;
}
</style>
<style scoped>
.popup_content {
	margin-top: 20px;
}
.popup_title {
	color: #1A1A1A;
	font-size: 16px;
	font-weight: bold;
	text-align: center;
	margin-top: 10px;
}
.update_image {
	width: 79px;
	height: 79px;
}
.update_title {
	color: #1A1A1A;
	font-size: 16px;
	font-weight: bold;
	margin-top: 14px;
}
.release {
	text-align: center;
	margin-top: 20px;
}
.release_close {
	text-align: center;
	margin-top: 35px;
}
.release_close_icon {
	font-size: 18px;
	color: #575B66;
}
</style>